<template>
    <div class="radio">
        <span>{{text}}</span>
        <input type="checkbox" v-model="isDefaul" @change="sendVal">
    </div>
</template>

<script>
    export default {
        name:"CheckBox-Component",
        props:['text','value'],
        data(){
            return {
                isDefaul:false
            }
        },
        methods: {
            sendVal(){
                this.$emit('getVal',this.isDefaul)
            }
        },
        mounted() {
            this.isDefaul = this.value
        },

    }
</script>

<style scoped lang="less">
    .radio{
        width: 95%; 
        margin: 0 auto;
        border-bottom: 1px solid rgb(235, 232, 232);
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span{
            display: block;
            width: 120px;
            font-size: 14px;
            line-height: 30px;
        }

        input{
            width: 20px;
            height: 20px;
            margin-right: 20px;
        }

    }
</style>